<template>
  <div>
    <div class="list">
      <i class="el-icon-collection-tag" style="color: rgb(255, 103, 0)"></i>
      我的购物车
    </div>
    <hr />

    <div class="shuju" v-show="shop.length != 0">
      <div class="item">
        <table>
          <tr>
            <th><input type="checkbox" v-model="checkall" />全选</th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in shop" :key="item.productID">
            <td><input type="checkbox" v-model="item.check" />反选</td>
            <td>
              <img
                :src="'http://101.132.181.9:3000/' + item.productImg"
                alt=""
              />{{ item.productName }}
            </td>
            <td>{{ item.price }}</td>
            <td>
              <el-input-number
                v-model="item.num"
                :min="1"
                :max="item.maxNum"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>{{ item.num * item.price }}</td>
            <td>
              <i class="el-icon-error" @click="delent(item.productID)"></i>
            </td>
          </tr>
        </table>
      </div>
      <div class="s1">
        <div class="s2">
          <span @click="$router.push('/goods')">继续购物</span>
          <p>共件{{ shop.length }}商品，已选择{{ shopprice.checknum }}件产品</p>
        </div>
        <div class="s3">
          <p>合计{{ shopprice.checkPricenum }}</p>
          <button :disabled="shopprice.checknum > 0 ? false : true" @click="gojiesuan()">
            去结算
          </button>
        </div>
      </div>
    </div>

    <div class="empy" v-show="shop.length == 0">
      <p>您的购物车还是空的！</p>
      <span>快去购物吧！</span>
    </div>
  </div>
</template>

<script>
import { shopList } from "@/api/shop";
import { delentList } from "@/api/details";
export default {
  name: "shoppingCart",
  data() {
    return {
      num: 1,
      userId: this.$store.state.users.user_id,
      shop: [],
    };
  },
  created() {
    this.getdata();
  },
  computed: {
    //全选反选
    checkall: {
      get() {
        return this.shop.every((item) => {
          return item.check == true;
        });
      },
      set(v) {
        return this.shop.forEach((item) => {
          return (item.check = v);
        });
      },
    },
    //价格
    shopprice() {
      var checknum = 0;
      var checkPricenum = 0;
      this.shop.forEach((item) => {
        if (item.check == true) {
          checknum += item.num;
          checkPricenum += item.num * item.price;
        }
      });
      return { checknum, checkPricenum };
    },
  },

  methods: {
    //去结算
    gojiesuan(){
        let obj=this.shop.filter((item)=>{
            return item.check===true
        })
        this.$store.commit("picss",obj)
        this.$router.push("/confirmOrder")
    },
    //删除购物车
    async delent(pid) {
      let res = await delentList({ product_id: pid, user_id: this.userId });
      if (res.code == "001") {
        this.getdata();
        this.$notify.success({
          title: "删除成功",
          message: "删除购物车商品成功",

          type: "success",
        });
      }
      console.log(res);
    },
    async getdata() {
      let res = await shopList({ user_id: this.userId });
      console.log(res, "shop");
      if (res.code == "001") {
        this.shop = res.shoppingCartData;
        this.$store.commit('shops',res.shoppingCartData)
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.empy {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  background: url(http://101.132.181.9/img/cart-empty.8b316431.png) no-repeat
    124px 0;
  color: #b0b0b0;
  overflow: hidden;
  p {
    margin: 70px 0 15px;
    font-size: 36px;
  }
  span {
    margin: 0 0 20px;
    font-size: 20px;
  }
}
.s1 {
  width: 80%;
  height: 80px;
  background-color: white;
  margin: auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .s2 {
    display: flex;
    span {
      line-height: 50px;
      margin-left: 32px;
      color: #757575;
      &:hover {
        color: #ff6700 !important;
      }
    }
    p {
      line-height: 50px;
      margin-left: 32px;
      color: #757575;
    }
  }
  .s3 {
    display: flex;
    p {
      color: #ff6700;
      font-size: 25px;
      line-height: 80px;
    }
    button {
      height: 80px;
      width: 200px;
      text-align: center;
      font-size: 18px;
      margin-left: 50px;
      color: #b0b0b0;
    }
  }
}
.list {
  width: 80%;
  height: 64px;
  margin: auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}
hr {
  background-color: red;
}
.shuju {
  width: 100%;
  height: 600px;
  background-color: #f5f5f5;
  .item {
    width: 80%;
    background-color: #ffffff;
    margin: auto;
    table {
      width: 100%;
      border-bottom: 1px solid #e0e0e0;
      text-align: center;
      img {
        width: 80px;
        height: 80px;
      }
    }
  }
}
</style>